<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        新建医学课堂视频分类
                    </div>
                    <div class="publicTable toLongTable">
                        <div class="main-returns">
                            <i class="el-icon-arrow-left" @click="returns()"></i>
                            <span @click="returns()">返回</span>
                        </div>
                        <div class="main-meeting">
                            <div class="main-meetings clear">
                                <div class="main-meetings-l">排序：</div>
                                <div class="fl">
                                    <el-input v-model.trim="numbers" type="number" placeholder="请输入序号"></el-input>
                                </div>
                            </div>
                            <div class="main-meetings clear">
                                <div class="main-meetings-l">分类名称：</div>
                                <div class="fl">
                                    <el-input v-model.trim="name" clearable placeholder="请输入分类名称"></el-input>
                                </div>
                            </div>
                            <div class="main-meetings bannerContent clear">
                                <div class="main-meetings-l">选择分类logo：</div>
                                <div class="fl rightContent">
                                    <label class="chooseBanner" for="uploads">选择图片</label>
                                    <input type="file" name="img" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/jpg" @change="uploadImg($event)">
                                </div>
                            </div>
                            <div class="main-meetings clear">
                                <div class="main-meetings-l">logo：</div>
                                <div class="fl main-meetings-img">
                                    <img :src=imgUrl alt=""><br>
                                    <span>（建议尺寸为100*100）</span>
                                </div>
                            </div>
                            <div class="main-meetings clear">
                                <div class="main-meetings-l"></div>
                                <div class="fl">
                                    <div class="main-btns" @click="addSubmit()">确定</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import pubilc from "@/api/pubilc";
import medicalclassroom from "@/api/medicalclassroom";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "medicalclassroom",
      numbers: "",
      name: "",
      imgUrl: "",
      imgId: ""
    };
  },
  methods: {
    uploadImg(e) {
      let demos = event.currentTarget.files[0];
      var formdata1 = new FormData();
      formdata1.append("file", demos);
      formdata1.append("type", "8");
      pubilc.uploadImg(formdata1).then(res => {
        if (res.code == 1) {
          this.imgUrl = res.data.file.full_path;
          this.imgId = res.data.file.id;
        }
      });
    },
    addSubmit() {
      if (this.numbers == "") {
        this.$message({
          showClose: true,
          message: "请输入排序！",
          type: "error"
        });
        return false;
      }
      if (this.name == "") {
        this.$message({
          showClose: true,
          message: "请输入分类名称！",
          type: "error"
        });
        return false;
      }
      if (this.imgId == "") {
        this.$message({
          showClose: true,
          message: "请选择logo！",
          type: "error"
        });
        return false;
      }
      const options = {
        name: this.name,
        sort: this.numbers,
        image_id: this.imgId
      };
      medicalclassroom.addCate(options).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "添加成功！",
            type: "success"
          });
        }
      });
    },
    returns() {
      history.go(-1);
    }
  }
};
</script>

<style lang='less'>
</style>
